<template>
  <div class="container">
      <div class="closeBtn">
          <span class="iconfont iconicon-test" @click="$router.back()"></span>
      </div>
      <div class="logo">
          <span class="iconfont iconnew"></span>
      </div>
      <div class="inputName">
          <authInput 
          type="text" 
          placeholder="请输入手机号" 
          @input="setUserName"
          rule="^\d{4,16}$"
          err_message="请输入正确的手机号"
          />
      </div>
      <div class="inputPwd">
          <authInput
          type="password"
          placeholder="请输入密码"
          @input="setPassWord"
          rule="^\d{3,16}$"
          err_message="请输入正确的密码"
          />
      </div>
      <div class="btn">
          <authBtn text="登录" @send="sendLogin"/>
      </div>
      <div class="register">
          还没有账号？<router-link to="/register">立即注册</router-link>

      </div>
      <!-- {{username}}{{userpwd}} -->
  </div>
  
</template>

<script>
import authInput from '../components/authlnput'
import authBtn from '../components/authBtn'
export default {
    // 注册组件
    components: {
        authInput : authInput,
        authBtn : authBtn
    },
    data(){
        // 设置默认值
        return {
            username: "",
            userpwd: ""
        }
    },
    methods:{
        // 通过触发事件把用户输入用户名的值传给父组件，传过来的值把父组件里面的默认值替换掉
        setUserName(name){
                this.username = name;
            },
            // 通过触发事件把用户输入密码的值传给父组件，传过来的值把父组件里面的默认值替换掉
        setPassWord(pwd){
            this.userpwd = pwd;
            // console.log(pwd)
        },
        // 点击登录按钮，发送阿贾克斯
        sendLogin(){
            this.$axios({
                // 访问地址
                url: '/login',
                // 发送报文类型
                method: 'POST',
                // 发送数据
                 // data 针对 post 方法
              // params 针对 get 方法
                data:{
                    username:this.username,
                    password: this.userpwd
                }
            })
            //   .then比如就是  success，是服务器响应回来的数据，里面的回调函数res就是服务器响应回来的数据
            .then(res=>{
                console.log(res);
                if(res.data.message == "登录成功"){
                    console.log('登录成功')
                    // console.log(res)
                    // 在本地储存保存数据
                    localStorage.setItem('token',res.data.data.token);
                    localStorage.setItem('user_id',res.data.data.user.id)
                    // 登录成功提示
                    this.$toast.success(res.data.message)
                    // 设置个定时器跳转页面
                    setTimeout(()=>{
                        this.$router.push({
                            name: 'homePage'
                        })
                    },1000)
                }
                 // 接收到了登陆结果,那么根据结果的不同弹出提示获取而跳转页面
                // if(res.data.statusCode && res.data.statusCode==401){
                    // 提示用户是否账号正确
                    // this.$toast.fail(res.data.message)
                // }else{
                    // 否则登录成功
                    // this.$toast.success(res.data.message)
                // }
            })
        }
    }
}
</script>

<style scoped lang="less">

    .container{
        padding: 0 5.556vw;
    }
    .closeBtn{
        padding-top: 5.556vw;
        .iconfont{
            font-size: 7.5vw;
        }
    }
    .logo{
        display: flex;
        justify-content: center;
        .iconfont{
            font-size: 35vw;
            color: #d81e06;
        }
    }
    .btn{
        margin-top: 6.667vw;
    }
    .register {
        text-align: center;
        margin-top: 6.667vw;
    }
</style>>

